<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-form ref="form" :model="form" :rules="rules" label-width="240px">
        <el-form-item label="小程序分享配置" prop="shareConfig">
          <file-upload :limit="1" :fileSize="6" :fileType='["png", "jpg", "jpeg"]' v-model="form.shareConfig"/>
        </el-form-item>
        <el-form-item label="分享文案">
          <!-- <editor v-model="form.shareContent" :min-height="192"/> -->
          <el-input v-model="form.shareContent" type="textarea" :maxlength="200" show-word-limit placeholder="请输入分享文案" />
        </el-form-item>
        <el-form-item label="服务套餐购买协议名称" prop="purchaseFileName">
          <el-input v-model="form.purchaseFileName" placeholder="请输入服务套餐购买协议名称" />
        </el-form-item>
        <el-form-item label="服务套餐购买协议" prop="purchaseAgreement">
          <file-upload :limit="1" :fileSize="6" :fileType='["pdf", "doc", "docx"]' v-model="form.purchaseAgreement"/>
        </el-form-item>
        <el-form-item label="员工劳动合同到期前多少天提醒" prop="remindDays">
          <el-input v-model="form.remindDays" placeholder="请输入员工劳动合同到期前多少天提醒" />
        </el-form-item>
        <el-form-item label="自动注册企业的试用天数" prop="tryDays">
          <el-input v-model="form.tryDays" placeholder="请输入自动注册企业的试用天数" />
        </el-form-item>
        <el-form-item label="平台服务是否参与分佣" prop="platformPart">
          <el-radio-group v-model="form.platformPart">
            <el-radio label="1">不参与</el-radio>
            <el-radio label="2">参与</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <p class="form-span-title">代理商分佣的平台权益</p>
      <el-col :span="18">
        <el-form :model="rightInfo" size="small" :inline="true" label-width="68px">
          <el-form-item label="权益类型" prop="businessType">
            <el-select v-model="rightInfo.businessType" placeholder="请选择" @change="businessTypeChange" style="width: 100%;">
              <el-option label="使用时长" value="1"></el-option>
              <el-option label="合同份数" value="2"></el-option>
              <el-option label="短信条数" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权益方案" prop="rightsId">
            <el-select v-model="rightInfo.rightsId" @change="rightsIdChange" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in platList"
                :key="item.id"
                :label="item.rightName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="add1">添加</el-button>
          </el-form-item>
        </el-form>
        <el-table style="width: 100%;margin: 0 auto;" :data="form.rightList">
          <el-table-column :formatter="defaultTableColumnDate" prop="businessType" label="权益类型">
            <template slot-scope="scope">
              {{ businessTypeInfo[scope.row.businessType] }}
            </template>
          </el-table-column>
          <el-table-column :formatter="defaultTableColumnDate" prop="rightName" label="权益方案"></el-table-column>
          <el-table-column :formatter="defaultTableColumnDate" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete1(scope.$index)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <p class="form-span-title">行业字典表维护</p>
        <el-col :span="18">
          <el-form :model="sectorInfo" size="small" :inline="true" label-width="68px">
            <el-form-item label="行业名称" prop="sectorName">
              <el-input v-model="sectorInfo.sectorName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="排序值" prop="sort">
              <el-input-number :min="1" :controls="false" :precision="0" v-model="sectorInfo.sort" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="add2">添加</el-button>
            </el-form-item>
          </el-form>
          <el-table style="width: 100%;margin: 0 auto;" :data="form.sectorList">
            <el-table-column :formatter="defaultTableColumnDate" prop="sectorName" label="行业名称"></el-table-column>
            <el-table-column :formatter="defaultTableColumnDate" prop="sort" label="排序值"></el-table-column>
            <el-table-column :formatter="defaultTableColumnDate" label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete2(scope.$index)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-col>
      <el-col :span="24" style="text-align: center;margin-top: 50px;">
        <el-button type="primary" @click="submitForm">保存提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listOperationSystemConfig, addOperationSystemConfig, updateOperationSystemConfig } from "@/api/system/operationSystemConfig";
import { platformRightsList } from "@/api/system/enterpriseInfo";

export default {
  name: "OperationSystemConfig",
  data() {
    return {
      businessTypeInfo: {
        '1': '使用时长',
        '2': '合同份数',
        '3': '短信条数',
      },
      platList: [],
      sectorInfo: {},
      rightInfo: {
        rightsId: '',
        rightName: '',
      },
      id: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 系统运营配置表格数据
      operationSystemConfigList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        shareConfig: null,
        shareContent: null,
        purchaseAgreement: null,
        remindDays: null,
        tryDays: null,
        platformPart: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getPlatformRightsList() {
      this.$modal.loading()
      platformRightsList({businessType: this.rightInfo.businessType}).then(response => {
        this.$modal.closeLoading()
        this.platList = response.data
      })
    },
    businessTypeChange() {
      this.rightInfo.rightsId = ''
      this.platList = []
      this.getPlatformRightsList()
    },
    rightsIdChange(e) {
      const info = this.platList.find(v => v.id == e)
      this.rightInfo.rightName = info.rightName
    },
    add1() {
      if(!this.rightInfo.businessType) {
        this.$modal.msg("请选择权益类型");
        return
      }
      if(!this.rightInfo.rightName) {
        this.$modal.msg("请选择权益方案");
        return
      }
      this.form.rightList.push(this.rightInfo)
      this.$modal.msgSuccess("添加成功,请保存");
      this.rightInfo = {
        rightsId: '',
        rightName: '',
      }
    },
    add2() {
      if(!this.sectorInfo.sectorName) {
        this.$modal.msg("请输入行业名称");
        return
      }
      if(!this.sectorInfo.sort) {
        this.$modal.msg("请输入排序值");
        return
      }
      this.form.sectorList.push(this.sectorInfo)
      this.$modal.msgSuccess("添加成功,请保存");
      this.sectorInfo = {}
    },
    /** 查询系统运营配置列表 */
    getList() {
      this.loading = true;
      listOperationSystemConfig(this.queryParams).then(response => {
        this.operationSystemConfigList = response.rows;
        if(response.rows.length) {
          this.id = response.rows[0].id
          this.form = response.rows[0];
        } else {
          this.reset();
          this.id = ''
        }
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        shareConfig: null,
        shareContent: null,
        purchaseAgreement: null,
        remindDays: null,
        tryDays: null,
        platformPart: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 删除按钮操作 */
    handleDelete1(index) {
      this.$modal.confirm('是否确认删除此数据项？').then(function() {
      }).then(() => {
        this.form.rightList.splice(index, 1)
        this.$modal.msgSuccess("删除成功,请保存");
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$modal.loading()
          if (this.id != null) {
            updateOperationSystemConfig({...this.form, id: this.id}).then(response => {
              this.$modal.closeLoading()
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOperationSystemConfig(this.form).then(response => {
              this.$modal.closeLoading()
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  }
};
</script>
